import React,{useState,useEffect} from 'react'
import axios from 'axios'
import { Slider } from 'react-vant';
import {useNavigate} from 'react-router-dom'
export default function List() {
    let navigate = useNavigate()
    const [value, setValue] = useState(10);
    let [list1,setList1]=useState([])
    let [list2,setList2]=useState([])
    let [value1,setValue1]=useState('')

    let [value3,setValue3]=useState('')
    let [flag1,setFlag1]=useState(true)
    let [flag3,setFlag3]=useState(true)
    let [cid,setCid]=useState('66ecf31ded45402d62ca4e68')
    let [show, setShow]=useState(false)
    let [show1, setShow1]=useState(false)
    useEffect(()=>{
        getRenwu()
    },[])
    let getRenwu=async()=>{
        let {data:{list1,list2,list3}} = await axios.get('http://localhost:3000/renwu')
        setList1(list1)
        setList2(list2)
    }
    let add1 = async()=>{
        let obj = {name:value1,status:false,cid}
        let res = await axios.post('http://localhost:3000/add1',obj)
        console.log(res);
        getRenwu()
        setValue1('')
        setFlag1(!flag1)
    }
    let onChange1 = (index)=>{
        let list = list1.slice()
        list[index].status=!list[index].status
        setList1(list)
    }
    let up1 = async()=>{
        let res = await axios.post('http://localhost:3000/up1',list1)
        console.log(res);
        navigate('/index/ok')
    }
  return (
    <div>
        <h1>项目一</h1>
        <div>
            <span style={{marginRight:'20px',color:'red'}}>任务板</span>
            <span style={{marginRight:'20px'}}>附件</span>
            <span style={{marginRight:'20px'}}>任务任务</span>
            <span style={{marginRight:'20px'}} onClick={()=>navigate('/index/ok')}>归档任务</span>
        </div>
        <div style={{width:'100%',display:'flex'}}>
            <div style={{width:'20%',marginRight:'20px'}}>
                <h3>要做     {list1.filter(item=>item.status).length}/{list1.length}  <span onClick={()=>setShow(true)}>...</span></h3>
                <Slider range value={list1.filter(item=>item.status).length} onChange={setValue} min={0} max={list1.length}  />
                <br/>
                <br/>
                {list1.map((item,index)=>(
                    <div key={item._id}>
                        <span >
                            <input type='checkbox' checked={item.status} onChange={()=>{onChange1(index)}} />
                        </span>
                        <span>{item.name}</span>
                    </div>
                ))}
                {
                    flag1?
                    <span onClick={()=>setFlag1(false)}>新建任务</span>
                    : 
                    <div>
                        <textarea cols='15' rows='5' value={value1} onChange={(e)=>setValue1(e.target.value)}></textarea>
                        <button onClick={add1}>确定</button>
                    </div>
                }
            </div>


            <div style={{width:'20%',marginRight:'20px',display:show1?'block':'none'}}>
                <h3>{value3}    {list2.filter(item=>item.status).length}/{list2.length}  <span >...</span></h3>
                <Slider range value={list2.filter(item=>item.status).length} onChange={setValue} min={0} max={list2.length}  />
                <br/>
                <br/>
                {list2.map((item,index)=>(
                    <div key={item._id}>
                        <span >
                            <input type='checkbox'/>
                        </span>
                        <span>{item.name}</span>
                    </div>
                ))}
                {
                    flag3?
                    <span onClick={()=>setFlag3(false)}>新建任务</span>
                    : 
                    <div>
                        <textarea cols='15' rows='5' value={value3} onChange={(e)=>setValue3(e.target.value)}></textarea>
                        <button onClick={add1}>确定</button>
                    </div>
                }
            </div>

            
        </div>
        


       

        <div style={{position:'fixed',top:'110px',left:'450px',display:show?'block':'none'}}>
            <p onClick={up1}>归档到已完成</p>
        </div>
    </div>
  )
}
